<!--
 * @Author: byron
 * @Date: 2021-10-02 16:04:19
 * @LastEditTime: 2021-10-04 15:25:33
-->
<template>
    <WithPagination
        :getData="getSearch"
        :getDataParams="searchParams"
        @getDataSuccess="onGetSearch"
        :total="total"
        :limit="40"
        :scrollTarget="this.$parent.$refs.searchRef"
    >
        <SongTable
            :tableData="songs"
            :isStripe="true"
            :isShowImg="false"
            :showHeader="true"
            :highlightText="keywords"
        />
    </WithPagination>
</template>

<script>
import WithPagination from '@/components/with-pagination.vue'
import SongTable from '@/components/song-table.vue'
import { getSearch } from '@/api'
import { createSong } from '@/utils'

export default {
    inject: ['searchRoot'],
    components: { WithPagination, SongTable },
    props: {},
    data() {
        return {
            total: 0,
            songs: [],
        }
    },
    watch: {},
    computed: {
        keywords() {
            return this.searchRoot.keywords
        },
        searchParams() {
            if (!this.keywords) return
            return { keywords: this.keywords }
        },
    },
    methods: {
        onGetSearch(result) {
            const {
                result: { songCount, songs },
            } = result
            this.total = songCount
            this.songs = songs.map((song) => {
                const { id, mvid, name, alias, artists, duration, album } = song
                return createSong({
                    id,
                    name,
                    alias,
                    artists,
                    duration,
                    mvId: mvid,
                    albumName: album.name,
                    albumId: album.id,
                })
            })
            this.searchRoot.bindTotal(songCount)
        },
    },
    created() {
        this.getSearch = getSearch
    },
    mounted() {},
}
</script>
<style lang="scss" scoped></style>
